<template>
  <!-- <img :src="outputSrc" alt="Base64 Image"> -->
  <div></div>
</template>
<script setup>
//帮我用vue写一个去除图片透明区域的代码
import { ref, onMounted } from 'vue';
let props = defineProps({
  imgPath: String,
  imgName: String
})
const imageSrc = ref(''); // 图片的源地址
const outputSrc = ref(''); // 处理后的图片源地址

const handleRemoveTransparency = async () => {
  const image = new Image();
  image.src = imageSrc.value;
  
  image.onload = async () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // 设置canvas的宽高与图片一致
    canvas.width = image.width;
    // canvas.width = 400;
    canvas.height = image.height;
    // canvas.height = 300;
    
    // 将图片绘制到canvas上
    ctx.drawImage(image, 0, 0);
    
    // 获取canvas的像素数据
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    // 移除透明区域
    const newImageData = removeTransparency(imageData);
    
    // 将移除透明区域后的数据绘制到新的canvas上
    const newCanvas = document.createElement('canvas');
    const newCtx = newCanvas.getContext('2d');
    newCanvas.width = canvas.width;
    newCanvas.height = canvas.height;
    newCtx.putImageData(newImageData, 0, 0);
    newCanvas.addEventListener('mouseover', () => {
      // 处理后的图片点击事件
      newCanvas.width = newCanvas.width * 1.5;
      newCanvas.height = newCanvas.height * 1.5;
    });
    
    // 将新的canvas添加到页面中
    document.body.appendChild(newCanvas);
    // 获取处理后的图片的base64编码
    // outputSrc.value = newCanvas.toDataURL();
    // console.log(outputSrc.value)
    // // newCanvas.toBlob((blob)=>{
    // //   file.value = new File([blob], 'part'+props.imgName+'.png', { type: "image/png" });
    // // }, 'image/png')
    // // console.log(file.value)
  };
};

onMounted(() => {
  // 假设在mounted时已经有图片的源地址了
  imageSrc.value = props.imgPath;
  handleRemoveTransparency();
}); 
// 函数接收一个ImageData对象作为参数
function removeTransparency(imageData) {
  // 创建一个新的ImageData对象，用于存储移除透明区域后的数据
  const newImageData = new ImageData(imageData.width, imageData.height);
  
  // 遍历每个像素
  for (let i = 0; i < imageData.data.length; i += 4) {
    // 获取当前像素的透明度值
    const alpha = imageData.data[i + 3];
    
    // 如果透明度值为0，表示当前像素是透明的，需要移除
    if (alpha !== 0) {
      // 如果当前像素不是透明的，则直接复制过来
      newImageData.data[i] = imageData.data[i];
      newImageData.data[i + 1] = imageData.data[i + 1];
      newImageData.data[i + 2] = imageData.data[i + 2];
      newImageData.data[i + 3] = imageData.data[i + 3];
    }
  }
  
  return newImageData;
}
</script>
<style></style>